<template>
  <div>
    <router-link tag="div"
                 to="/"
                 class="header-abs"
                 v-show="showAbs">
      <svg class="icon header-abs-back"
           aria-hidden="true">
        <use xlink:href="#icon-fanhui"></use>
      </svg>
    </router-link>
    <div class="header-fixed"
         v-show="!showAbs"
         :style="opacityStyle">
      <router-link to="/"
                   class="header-fixed_back">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </router-link>
      景点详情
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: 0
    }
  },
  methods: {
    // 让header渐隐渐现
    handleScroll () {
      console.log('scroll')
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
          opacity
        }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
  /* activated () {
    console.log('activated')
    // 全局绑定到window
    window.addEventListener('scroll', this.handleScroll)
  } */
  /* deactivated () {
    // 取消全局绑定的scroll
    window.removeEventListener('scroll', this.handleScroll)
  } */
}
</script>

<style lang='scss' scoped>
@import '~@sass/varibles/_color';
.header-abs {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  text-align: center;
  line-height: 0.8rem;
}
.header-abs-back {
  color: #fff;
  font-size: 0.4rem;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: $header-ht;
  line-height: $header-ht;
  background-color: $g-bg-c;
  color: #fff;
  font-size: 0.32rem;
  z-index: 10;
}
.header-fixed_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.64rem;
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
}
</style>
